import React, { useState, useEffect } from 'react';
import { Layout, Card, Row, Col, Statistic, Typography, Button } from 'antd';  // 新增 Button 导入
import { Link, useLocation } from 'react-router-dom';
import SideMenu from '../components/SideMenu';  // 已正确引入公共菜单组件

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

const JieSuanShuJu = () => {
    const [sellerData] = useState({ storeName: 'FENGDEKUN' });
    // 修改1：初始化 activeMenuKey 为结算数据对应的菜单项 key '14'
    const [activeMenuKey, setActiveMenuKey] = useState('14');
    const location = useLocation();

    // 修改2：监听路由变化，同步菜单高亮状态（对应结算数据路由 '/settlement-data'）
    useEffect(() => {
        if (location.pathname === '/settlement-data') {
            setActiveMenuKey('14');
        }
    }, [location]);

    const handleMenuItemClick = (e) => {
        setActiveMenuKey(e.key);
    };

    return (
        <Layout>
            <Sider width={200} style={{ background: '#fff' }}>
                <SideMenu 
                    activeMenuKey={activeMenuKey} 
                    onMenuItemClick={handleMenuItemClick}
                />
                <div style={{ position: 'absolute', bottom: 10, width: '180px' }}>
                    <Button type="primary" block style={{ backgroundColor: '#ff6600', color: 'white', border: 'none' }}>
                        卖家中心
                    </Button>
                </div>
            </Sider>

            <Layout>
                <Header style={{ background: '#fff', padding: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '64px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Title level={5} style={{ color: '#ff6600', fontWeight: 'bold', marginRight: '10px' }}>DUK</Title>
                            <Title level={5} style={{ color: '#666' }}>跨境卖家</Title>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Card style={{ background: '#ff6600', color: 'white', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                Seller Central
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                运营对接
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                反馈
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px' }}>
                                {sellerData.storeName}
                            </Card>
                        </div>
                    </div>
                </Header>

                <Content style={{ padding: '0 50px' }}>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <Card title="待处理款项">
                                <Statistic title="预估待结算销售额(CNY)" value={286.00} valueStyle={{ color: '#ff6600' }} />
                            </Card>
                        </Col>
                        <Col span={24}>
                            <Card title="交易收入详情">
                                <Row gutter={[16, 16]}>
                                    <Col span={8}>
                                        <Statistic title="交易收入(CNY)" value={286.00} valueStyle={{ color: '#ff6600' }} />
                                    </Col>
                                    <Col span={8}>
                                        <Statistic title="售后预留金额(CNY)" value={0.00} />
                                    </Col>
                                    <Col span={8}>
                                        <Statistic title="售后释放金额(CNY)" value={0.00} />
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                        <Col span={24}>
                            <Card title="已到账款项">
                                <Row gutter={[16, 16]}>
                                    <Col span={8}>
                                        <Statistic title="交易收入(CNY)" value={1586.00} valueStyle={{ color: '#ff6600' }} />
                                    </Col>
                                    <Col span={8}>
                                        <Statistic title="售后预留金额(CNY)" value={290.00} />
                                    </Col>
                                    <Col span={8}>
                                        <Statistic title="售后释放金额(CNY)" value={0.00} />
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                    </Row>
                </Content>
            </Layout>
        </Layout>
    );
};

export default JieSuanShuJu;